<template>
    <div>
        <input type="text" v-model="text">
        <!-- 使用v-slot="接收名称" 接收组件插槽传来的数据 -->
        <Nowplaying v-slot="props">
            <ul>
                <!-- 接收名称.组件插槽中定义的传输名称 -->
                <li v-for="item in props.datalist" :key="item.id">
                    <div v-if="item.nm.includes(text) && text!=''" style="color:red">
                        {{ item.nm }}
                    </div>
                    <div v-else>
                        {{ item.nm }}
                    </div>
                </li>
            </ul>
        </Nowplaying>


        <!-- 使用#插槽名="接收名称" 接收组件插槽传来的数据  {解构} -->
        <Nowplaying #movie="{datalist}">
            <ul>
                <!-- 接收名称.组件插槽中定义的传输名称 -->
                <li v-for="item in datalist" :key="item.id">
                    <div v-if="item.nm.includes(text) && text!=''" style="color:red">
                        {{ item.nm }}
                    </div>
                    <div v-else>
                        {{ item.nm }}
                    </div>
                </li>
            </ul>
        </Nowplaying>
    </div>
</template>

<script>
import Nowplaying from './Nowplaying.vue'
export default {   
    components:{
        Nowplaying
    },
    data(){
        return{
            text:''
        }
    }
}
</script>

<style>

</style>